<html>
    <head>
        <title>Test</title>
        <style>

main { size:*; }

table { border:2dip solid #ccc; background:#fff; size:*; border-spacing:0; }

        </style>
        <script type="text/tiscript">

include "vlist.tis";

function recordsGenerator() {
  var out = [];
  for(var i in 5000) out.push 
    { 
      key:i.toString(),
      field1: String.$({i}.1),
      field2: String.$({i}.2),
      field3: String.UID()
    };
  return out;
}

var table;
var records = recordsGenerator();

$(main).content( 
  <VTable #grid multiselect sortable recordset={records} @{table}>
    <columns>
      <th field="field1">First</th>
      <th field="field2">Second</th>
      <th field="field3">Third</th>
    </columns>
    { 
      function(record,index) { // function generating single row
        return 
          <tr key={record.key} 
           :current={this.currentRecord===record} 
           :checked={this.isSelected(record)}>
            <td>cell {record.field1}</td>
            <td>cell {record.field2}</td>
            <td>{record.field3}</td>
          </tr>;
      }
    }
  </VTable>);

event click $(button#check-all) {
  function reducer(map, record) { map[record.key] = record; return map; } // converts vector to map
  table.selectedRecords = records.reduce(reducer, {});
  return true;
}

event click $(button#clear-all) {
  table.selectedRecords = {};
  return true;
}

        </script>
    </head>
    <body>
      <p>Demo of simple virtual list component &lt;VTable>.</p>
      <p>The caller shall suply record view producer function.</p>
      <p>The grid supports multiselection (CTRL+CLICK) and sorting (CLICK on column header).</p>
      <main></main>
      <button#check-all>Check All</button>
      <button#clear-all>Clear All</button>
    </body>
</html>